<template>
  <div class="message-item">
    <div class="message-ct">{{ message }}</div>
    <div class="message-infos">
      <span class="username">{{ username }} -</span>
      <span class="time">{{ getDate }}</span>
    </div>
    <div class="del-btn" @click="delItem">
      <span>╳</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "MessageItem",
  props: {
    username: {
      type: String,
      default: "匿名用户",
    },
    message: {
      type: String,
      default: "*****",
    },
    idx: {
      type: Number,
      require: true,
    },
  },
  methods: {
    delItem() {
      this.$emit("delMsg", this.username, this.idx);
    },
  },
  computed: {
    getDate() {
      let date = new Date();
      return `
      ${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}
      ${date.toLocaleTimeString().replace(/[^0-9:]/g, "")}`;
    },
  },
};
</script>

<style scoped>
.del-btn {
  background-color: #fcb9b3;
  position: absolute;
  right: 6px;
  top: 6px;
  width: 20px;
  height: 20px;
  text-align: center;
  color: #fff;
  border-radius: 50%;
}
.message-item {
  position: relative;
  margin-bottom: 15px;
  padding: 8px;
  border-radius: 8px;
  box-shadow: 0 2px 10px #b6e0ff;
}
.message-ct {
  padding-right: 25px;
  font-size: 18px;
  color: #333;
  font-family: "consolas", Geneva, Verdana, sans-serif;
}
.message-infos {
  text-align: right;
  font-size: 12px;
  color: #cfcfcf;
}
.message-infos .username {
  font-weight: 800;
}
.gradient-border {
  --border-width: 3px;
  background-color: #d9eefe;
  border-radius: var(--border-width);
}
.gradient-border::after {
  position: absolute;
  content: "";
  top: calc(-1 * var(--border-width));
  left: calc(-1 * var(--border-width));
  z-index: -1;
  width: calc(100% + var(--border-width) * 2);
  height: calc(100% + var(--border-width) * 2);
  background: linear-gradient(
    60deg,
    #5f86f2,
    #fae2a0,
    #ccf1a4,
    #a9f8bc,
    #5ff2f0
  );
  background-size: 300% 300%;
  background-position: 0 50%;
  border-radius: calc(2 * var(--border-width));
  animation: moveGradient 4s alternate infinite;
}

@keyframes moveGradient {
  50% {
    background-position: 100% 50%;
  }
}
</style>